<template>
<view class="content">
    <tab 
        v-model="activeKey" 
        :navData="scrollData"
        @change="tabChange"
        @tabClick="tabClick"
    >
        
		<scroll-view scroll-y slot="slot-1" style="overflow:auto;height:1200rpx">
			<view class="repair">
				<view class="repair-list">
					<view  class="item" v-for="(apply, index) in result" :key="index" @click="showdetails(apply)">
						<view class="carrier">
							<view class="repair-wrapper">
								<view class="title in1line">
										<template >{{apply.instanceType}}</template>
									<!-- 
										<template >{{apply.taskName}}</template> -->
								</view>
								<view class="content in2line">{{apply.description}}</view>
								<!-- <view class="time">张三 2020-12-12</view> -->
								<view class="sta">
									申请中
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 添加按钮 -->
				<view class="add-round bg-deepBlue" :class="'bg-' + themeColor.name" @click="navTo(`/pages/examine/add`)">
					<text class="cuIcon-add text-xxl"></text>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y slot="slot-2" style="overflow:auto;height:1200rpx">
			<view class="repair">
				<view class="repair-list">
					<view  class="item" v-for="(happly, index) in result2" :key="index" @click="showdetails2(happly)">
						<view class="carrier">
							<view class="repair-wrapper">
								<view class="title in1line">
										<template >{{happly.taskName}}</template>
									<!-- 
										<template >{{apply.taskName}}</template> -->
								</view>
								<view class="content in2line">{{happly.description}}</view>
								<!-- <view class="time">张三 2020-12-12</view> -->
								<view class="sta2">
									已结束
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 添加按钮 -->
<!-- 				<view class="add-round bg-deepBlue" :class="'bg-' + themeColor.name" @click="navTo(`/pages/examine/add`)">
					<text class="cuIcon-add text-xxl"></text>
				</view> -->
			</view>
		</scroll-view>
		<scroll-view scroll-y slot="slot-3" style="overflow:auto;height:1200rpx">
			<view class="repair">
				<view class="repair-list">
					<view  class="item" v-for="(wapply, index) in result3" :key="index" @click="showdetails3(wapply)">
						<view class="carrier">
							<view class="repair-wrapper">
								<view class="title in1line">
										<template >{{wapply.taskName}}</template>
									<!-- 
										<template >{{apply.taskName}}</template> -->
								</view>
								<view class="content in2line">{{wapply.description}}</view>
								<!-- <view class="time">张三 2020-12-12</view> -->
								<view class="sta">
									申请中
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 添加按钮 -->
<!-- 				<view class="add-round bg-deepBlue" :class="'bg-' + themeColor.name" @click="navTo(`/pages/examine/add`)">
					<text class="cuIcon-add text-xxl"></text>
				</view> -->
			</view>
		</scroll-view>

    </tab>
</view>
</template>

<script>
	import tab from '@/components/Mark-Tab/Tab.vue';
	export default {
		data() {
			return {
				activeKey:0,
				scrollData:[
				    {
				        label:'申请列表',
				        slot:'slot-1'
				    },
				    {
				        label:'历史申请',
				        slot:'slot-2'
				    },
				    {
				        label:'待我审批',
				        slot:'slot-3'
				    }
				],
				result: [],// 申请列表的信息
				result2: [],// 历史申请列表的信息
				result3: [],// 待我审批列表的信息
				tableDataArray:[],
				tableDataArray2:[],
				tableDataArray3:[]
			};
		},
		onLoad(){
			this.result = [];
			this.page = 1;
			this.getApplyList();
			this.getHApplyList();
			this.getWApplyList();
			// this.getData();
		},
		onShow() {
			this.initData();
			this.getApplyList();
			this.getHApplyList();
			this.getWApplyList();
		}, 
		components:{tab},
		methods: {
			tabChange(e){
			    console.log(e);
			},
			tabClick(e){
			    console.log(e);
			},

		    // 点击跳转申请列表信息详情页面
		    showdetails(apply) {
					  wx.navigateTo({
					  	url: `/pages/examine/detail?apply=${JSON.stringify(apply)}`
					  })
		    },
			// 点击跳转历史申请信息详情页面
			showdetails2(happly) {
					  wx.navigateTo({
					  	url: `/pages/examine/history_detail?happly=${JSON.stringify(happly)}`
					  })
			},
			// 点击跳转申请列表信息详情页面
			showdetails3(wapply) {
					  wx.navigateTo({
					  	url: `/pages/examine/wait_detail?wapply=${JSON.stringify(wapply)}`
					  })
			},
			// 数据初始化
			initData() {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},
			navTo(route) {
				this.$mRouter.push({
					route
				});
			},
			getApplyList(){
				var page = 1;
				var size = 100;
				var that = this;
				var applyfind = 0;
				var username=wx.getStorageSync('user');
				username=JSON.parse(username).name
				const headers = {
					// authentication: wx.getStorageSync('tokenStr') 
					authentication:'4d58f6f9-0240-4e14-b50c-047d598493d7'
				};
				wx.request({
					url: `http://121.36.218.32:9887/clouddocument/process/instance/${username}/${applyfind}/${page}/${size}`,
					method: 'get',
					header: headers,
					// header: {
					// 	'content-type': '4094899d-d2a0-4067-9025-8aa7394bc160'
					// },
					success(resp) {
						console.log(resp);
						var len = resp.data.data.length
						that.tableDataArray = resp.data.data
						that.tableDataArray.pop(resp.data.data[len - 1])
						that.result = that.tableDataArray
					}
				})
			},
			getHApplyList(){
				var page = 1;
				var size = 100;
				var that = this;
				var applyfind = 0;
				var username=wx.getStorageSync('user');
				username=JSON.parse(username).name
				const headers = {
					authentication: wx.getStorageSync('tokenStr') 
					// authentication:'4d58f6f9-0240-4e14-b50c-047d598493d7'
				};
				wx.request({
					url: `http://121.36.218.32:9887/clouddocument/process/hiTask/${username}/${applyfind}/${page}/${size}`,
					method: 'get',
					header: headers,
					// header: {
					// 	'content-type': '4094899d-d2a0-4067-9025-8aa7394bc160'
					// },
					success(resp) {
						// console.log(resp.data.data)
						var len = resp.data.data.length
						that.tableDataArray2 = resp.data.data
						that.tableDataArray2.pop(resp.data.data[len - 1])
						that.result2 = that.tableDataArray2
					}
				})
			},
			getWApplyList(){
				var page = 1;
				var size = 100;
				var that = this;
				var applyfind = 0;
				var username=wx.getStorageSync('user');
				username=JSON.parse(username).name
				const headers = {
					authentication: wx.getStorageSync('tokenStr') 
					// authentication:'4d58f6f9-0240-4e14-b50c-047d598493d7'
				};
				wx.request({
					url: `http://121.36.218.32:9887/clouddocument/process/task/${username}/${applyfind}/${page}/${size}`,
					method: 'get',
					header: headers,
					// header: {
					// 	'content-type': '4094899d-d2a0-4067-9025-8aa7394bc160'
					// },
					success(resp) {
						var len = resp.data.data.length
						that.tableDataArray3 = resp.data.data
						that.tableDataArray3.pop(resp.data.data[len - 1])
						that.result3 = that.tableDataArray3
					}
				})
			},
			// getData(){
			// 	wx.request({
			// 	  method: 'GET',
			// 	  url:'http://121.36.218.32:9887/clouddocument/mtr/1/5',
			// 	  success(res){
			// 		console.log(22222)
			// 		console.log(res.data)
			// 		that.setData({
			// 		  // boardroomList:res.data
			// 		})
			// 	  }
			// 	})
			// }
		}
	};
</script>

<style lang="scss">
	page {
		background-color: $page-color-base;
	}

	.repair {

		.add-round {
			position: fixed;
			z-index: 999;
			right: 30rpx;
			bottom: 30rpx;
			border-radius: 50%;
			width: 120rpx;
			height: 120rpx;
			color: #fff;
			text-align: center;
			line-height: 120rpx;
			font-weight: 100;
			font-size: 80rpx;
		}

		.repair-list {
			margin-top: 20upx;

			.row {
				width: calc(94%);
				height: calc(22vw + 40upx);
				margin: 0 auto $spacing-base;
				border-radius: 15upx;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				position: relative;
				overflow: hidden;
				z-index: 4;
				border: 0;

				.carrier {
					@keyframes showMenu {
						0% {
							transform: translateX(0);
						}

						100% {
							transform: translateX(-30%);
						}
					}

					@keyframes closeMenu {
						0% {
							transform: translateX(-30%);
						}

						100% {
							transform: translateX(0);
						}
					}

					background-color: #fff;
					position: absolute;
					width: 100%;
					padding: 0 0;
					height: 100%;
					z-index: 3;
					display: flex;
					align-items: center;
				}
			}

			.repair-wrapper {
				background-color: $color-white;
				width: 100%;
				padding: $spacing-base $spacing-lg $spacing-base $spacing-lg;
				margin: $spacing-base 0 0;
				border-radius: 15upx;
				position: relative;

				.title {
					font-size: $font-lg;
					color: $font-color-dark;
					font-weight: 500;
					margin: 0 0 $spacing-sm;
				}

				.content {
					font-size: $font-sm;
					color: $font-color-base;
					height: 75upx;
					line-height: 36upx;
				}

				.time {
					font-size: $font-base;
					color: $font-color-light;
				}

			}
		}

	}
	.sta{
		position: absolute;
		right: 60rpx;
		top: 40%;
		color: #39B54A;
	}
	.sta2{
		position: absolute;
		right: 60rpx;
		top: 40%;
		color: #E54D42;
	}
</style>
